<template>
  <el-dialog
    title="添加页面"
    :visible="isShowPage"
    @close="btnCancel"
  >
    <el-form ref="addFromPage" :model="fromPage" :rules="rules">
      <el-form-item label="标题" label-width="50px" prop="title">
        <el-input v-model="fromPage.title" style="width: 90%" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <div id="app">
          <VueEditor ref="vueEditor" v-model="fromPage.content" />
        </div>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="btnCancel">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'
import { addPageList, editorPageList } from '@/api/page'
import axios from '@/utils/request'
export default {
  name: 'App',
  components: { VueEditor },
  props: {
    isShowPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userId: '',
      fromPage: {
        title: '',
        content: '',
        id: ''
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      },
      config: {
        uploadImage: {
          url: axios.defaults.baseURL + '/upload',
          name: 'file',
          headers: {
            Authorization: localStorage.getItem('token-backend-69')
          },
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            console.log(res)
            insert(axios.defaults.baseURL + res.data.data.url)
          }
        }
      }
    }
  },

  methods: {
    async   btnOk() {
      // // 校验表单
      await this.$refs.addFromPage.validate()
      // // 发送请求
      if (!this.fromPage.id) {
        await addPageList(this.fromPage)
      } else {
        console.log(this.fromPage)
        await editorPageList(this.userId, {
          title: this.fromPage.title,
          content: this.fromPage.content
        })
      }

      // // 提示
      this.$message.success('操作成功')

      // // 关闭弹窗
      this.$parent.isShowPage = false
      this.fromPage = {
        title: '',
        content: '',
        id: ''
      }
      // // 更新页面
      this.$parent.getPageList()
    },
    // 封装回显函数
    async getAddPageList(id) {
      this.userId = id
      const { data } = await editorPageList(id)
      this.fromPage = data
    },
    btnCancel() {
      this.fromPage = {
        title: '',
        content: '',
        id: ''
      }
      this.$parent.isShowPage = false
    }

  }
}
</script>
<style lang="scss" scoped>
@import "~vue2-editor/dist/vue2-editor.css";
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
.departmentTree {
  width: 90%;
  border: 1px solid #888;
  position: absolute;
  height: 200px;
  z-index: 9;
  overflow: auto;
}
</style>
